<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./swiper/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/customization.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">

    <!-- 引入 swiper 动画js文件 -->
    <script src="./js/swiper.animate1.0.3.min.js"></script>
    <!-- 引入swiper.js 文件 -->
    <script src="./swiper/js/swiper-bundle.min.js"></script>
    <!-- 引入jquery -->
    <script src="./js/jquery-1.11.2.min.js"></script>
</head>

<body>
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <!-- 第一页 -->
            <div class="swiper-slide background-8d0801">
                <h1 class="ani introduce-field1" swiper-animate-effect="animate__animated animate__fadeInUp"
                    swiper-animate-delay="0s">生命是一场</h1>
                <h1 class="ani introduce-field2" swiper-animate-effect="animate__animated animate__fadeInDown"
                    swiper-animate-delay="0s">奇妙的旅行</h1>
            </div>
            <!-- 第二页 -->
            <div class="swiper-slide background-8d0801">
                <h1 class="ani introduce-field3" swiper-animate-effect="animate__animated animate__backInLeft"
                    swiper-animate-delay="0s">我们</h1>
                <i class="ani iconfont icon-aixin" swiper-animate-effect="animate__animated animate__flash"></i>
                <i class="ani iconfont icon-aixin" swiper-animate-effect="animate__animated animate__flash"></i>
            </div>
            <!-- 第三页 -->
            <div class="swiper-slide background-fff">
                <div>
                    <h1 class="ani introduce-field4" swiper-animate-effect="animate__animated animate__backInLeft">走走停停
                    </h1>
                    <p class="ani introduce-field5" swiper-animate-effect="animate__animated  animate__backInRight">
                        遇见了彼此</p>
                </div>
            </div>
            <!-- 第四页 -->
            <div class="swiper-slide background-8d0801">
                <img src="./img/婚礼1.webp" alt="" class="ani wedding-img1"
                    swiper-animate-effect="animate__animated animate__zoomIn">
            </div>
            <!-- 第五页 -->
            <div class="swiper-slide background-8d0801">
                <img src="./img/婚礼2.webp" alt="" class="ani wedding-img2"
                    swiper-animate-effect="animate__animated animate__zoomIn">
            </div>
            <!-- 第六页 -->
            <div class="swiper-slide background-8d0801">
                <div>
                    <h1 class="ani introduce-field6" swiper-animate-effect="animate__animated animate__backInRight">从此我们
                    </h1>
                    <p class="ani introduce-field7" swiper-animate-effect="animate__animated  animate__backInLeft">
                        永不分离</p>
                </div>
            </div>
            <!-- 第七页 -->
            <div class="swiper-slide background-8d0801">
                <div>
                    <h1 class="ani introduce-field6" swiper-animate-effect="animate__animated animate__zoomIn">在这充满</h1>
                    <p class="ani introduce-field7" swiper-animate-effect="animate__animated animate__backInUp">幸福的一天</p>
                </div> 
            </div>
            <!-- 第八页 -->
            <div class="swiper-slide background-fff">
                <h1 class="ani introduce-field8" swiper-animate-effect="animate__animated animate__zoomIn">12月20日</h1>
            </div>
            <!-- 第九页 -->
            <div class="swiper-slide background-8d0801">
                <div>
                    <h1 class="ani introduce-field9" swiper-animate-effect="animate__animated  animate__backInLeft">罗密欧</h1>
                    <h1 class="ani introduce-field9" swiper-animate-effect="animate__animated  animate__fadeIn">&</h1>
                    <h1 class="ani introduce-field9" swiper-animate-effect="animate__animated animate__backInRight">朱丽叶</h1>
                </div>
            </div>
            <!-- 第十页 -->
            <div class="swiper-slide background-fff">
                <div>
                    <h1 class="ani introduce-field10" swiper-animate-effect="animate__animated  animate__bounceInDown">喜结</h1>
                    <h1 class="ani introduce-field10" swiper-animate-effect="animate__animated  animate__bounceInUp">连理</h1>
                </div>

            </div>
            <!-- 第十一页 -->
            <div class="swiper-slide background-8d0801">
                <h1 class="ani introduce-field11" swiper-animate-effect="animate__animated animate__rotateIn">各位</h1>
            </div>
            <!-- 第十二页 -->   
            <div class="swiper-slide background-fff">
                <div>
                    <h1 class="ani introduce-field12" swiper-animate-effect="animate__animated  animate__backInLeft">大朋友们</h1>
                    <h1 class="ani introduce-field12" swiper-animate-effect="animate__animated animate__backInRight">小朋友们</h1>
                </div>
            </div>
            <!-- 第十三页 -->
            <div class="swiper-slide background-8d0801">
                <div>
                    <p class="ani introduce-field13" swiper-animate-effect="animate__animated  animate__backInDown">诚邀您</p>
                    <p class="ani introduce-field14" swiper-animate-effect="animate__animated  animate__backInUp">携家人</p>
                </div>
            </div>
            <!-- 第十四页 -->
            <div class="swiper-slide background-fff">
                <h1  class="ani introduce-field15" swiper-animate-effect="animate__animated  animate__bounceInLeft">参加婚礼</h1>
            </div>
        </div>

    </div>

    </div>
    <!-- 翻页提示箭头 -->
    <div id="nextbtn">
        <img src="./images/arrow.png" alt="">
    </div>
    <!-- 音乐图标 -->
    <img src="./images/music-icon.png" id="music_icon" alt="">
    <!-- 音乐 -->
    <audio src="./audio/咋们结婚吧.mp3" id="audio"></audio>

    <!-- 引入音乐播放的js文件 ，注意一定要在audio下引入-->
    <script src="./js/playmusic.js"></script>
    <script>
        // 初始化swiper
        new Swiper('.mySwiper', {
            direction: 'vertical',
            on: {
                init: function () {
                    swiperAnimateCache(this); //隐藏动画元素 
                    swiperAnimate(this); //初始化完成开始动画
                },
                slideChangeTransitionEnd: function () {
                    swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                    //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
                }
            }
        })

    </script>


</body>

</html>